<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:dap="http://diamondparking.com"
                xmlns:s="http://jboss.com/products/seam/taglib"
                template="/templates/diamond-parking.xhtml">
    
    <ui:define name="pageTitle">Makes</ui:define>
    
    <ui:define name="pageBody">
        <h:form>
            <a4j:commandButton value="new"
                               action="#{makeHome.create}"
                               reRender="mp"
                               oncomplete="#{rich:component('mp')}.show()"/>
        </h:form>
        <br/>
        <rich:messages ajaxRendered="true"/>

        <rich:modalPanel id="mp">
            <f:facet name="header">Makes</f:facet>
            <a4j:form>
                <style>
                .form-field label { width: 100px;}    
                </style>

                <dap:formField>
                    <ui:define name="label">Id</ui:define>
                    <h:inputText value="#{make.id}"
                                 required="true"
                                 converterId="javax.faces.Long"/>
                </dap:formField>

                <dap:formField>
                    <ui:define name="label">Name</ui:define>
                    <h:inputText value="#{make.name}"
                                 required="true"/>
                </dap:formField>

                <c:choose>
                    <c:when test="#{not makeHome.managed}">
                        <a4j:commandButton value="Create"
                                           action="#{makeHome.persist}"
                                           reRender="dataTable"
                                           oncomplete="#{rich:component('mp')}.hide()"/>
                    </c:when>
                    <c:otherwise>
                        <a4j:commandButton value="Save"
                                           action="#{makeHome.update}"
                                           reRender="dataTable"
                                           oncomplete="#{rich:component('mp')}.hide()"/>        
                    </c:otherwise>
                </c:choose>

                &#160;
                <h:commandButton value="Cancel" onclick="#{rich:component('mp')}.hide(); return false;"/>
                <br/>
                <br/>
            </a4j:form>
        </rich:modalPanel>

        <rich:panel style="width: 100%; height: 350px; overflow-y: scroll;" layout="block">
            <style>
                td {
                vertical-align: top;
                }
            </style>
            <rich:dataTable id="dataTable" value="#{makes}" var="currMake" style="width: 100%;">
                <f:facet name="header">
                    <rich:columnGroup>
                        <rich:column>
                            <h:outputText value="Id"/>
                        </rich:column>

                        <rich:column>
                            <h:outputText value="Stall"/>
                        </rich:column>
                    </rich:columnGroup>
                </f:facet>

                <rich:column filterBy="#{currMake.id}"
                             filterEvent="onkeyup">
                    <f:facet name="header"><h:outputText value=" "/></f:facet>
                    <h:form>
                        <a4j:commandLink value="#{currMake.id}"
                                         action="#{makeHome.setId(currMake.id)}"
                                         reRender="mp"
                                         oncomplete="#{rich:component('mp')}.show()"/>
                    </h:form>
                </rich:column>

                <rich:column filterBy="#{currMake.name}"
                             filterEvent="onkeyup">
                    <h:outputText value="#{currMake.name}"/>
                </rich:column>
            </rich:dataTable>
        </rich:panel>
    </ui:define>
    
</ui:composition>
